<template>
  <van-overlay :show="show" @click="show = false">
    <allocation @show="show = false" />
  </van-overlay>
  <RouterView @setting="show = true" />
  <!-- <van-tabbar route v-model="active">
    <van-tabbar-item to="/aiDevice">
      <template #icon="{ active }">
        <SvgIcon :name="`AIDevice${active ? '2' : '1'}`" :size="25"
          :style="`color:${active ? '#427bff' : '#AAAAB5'};`" />
      </template>
AI Device</van-tabbar-item>
<van-tabbar-item to="/pocketAi">
  <template #icon="{ active }">
        <SvgIcon :name="`PocketAI${active ? '2' : '1'}`" :style="`color:${active ? 'white' : '#AAAAB5'};`" :size="25" />
      </template>
  Pocket AI</van-tabbar-item>
<van-tabbar-item to="/album">
  <template #icon="{ active }">
        <SvgIcon :name="`相册管理${active ? '2' : '1'}`" :size="25" :style="`color:${active ? '#427bff' : '#AAAAB5'};`" />
      </template>相册管理</van-tabbar-item>
<van-tabbar-item to="/nas">
  <template #icon="{ active }">
        <SvgIcon :name="`nas${active ? '2' : '1'}`" :size="25" :style="`color:${active ? '#427bff' : '#AAAAB5'};`" />
      </template>NAS文件</van-tabbar-item>
</van-tabbar> -->
</template>

<script setup>
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import allocation from './components/allocation.vue'

const show = ref(false)
</script>

<style lang="scss" scoped>
.van-tabbar {
  padding: 5px 0;
  background: #EDF2FF;

  .van-tabbar-item {
    background-color: transparent;
  }
}

.van-overlay {
  z-index: 2;
}

.SvgIcon {
  color: #AAAAB5;
}
</style>
